<style lang="scss">
    .msg-div{
      background: #ecf8ff;
      padding:16px;
      font-size: 14px;
      line-height: 22px;
      border-radius: 5px;
      color:#5e6d82;
      margin-top:4px;
      border-top:5px solid #50bfff;
      .copy-div{
        text-align: right;
        color:#409eff;
        text-decoration: underline;
      }
    }
    .sjdiv{
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid #50bfff;
      margin-left:calc(50% - 5px);
    }

</style>
<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      title="阶段指引"
      :beforeClose="handleClose2"
      :visible.sync="dialogVisible2"
      width="1100px">
      <div>
        <div id="main2" style="height:100px;" v-if="type !== 0"></div>
        <div class="info-div" style="margin-top:10px">
          <div class="target-gjzy-div">
            <div class="target-list">
              <div class="target-item"  v-for="(item,index) in topPurposeList" @click="setcutIndex(item.purposeId)" style="cursor: pointer">
                  <div style="display: flex;align-items: center;justify-content: flex-start" v-if="index == 0">
                    <div class="item-num" style="float:right" :style="{'background':item.isTrue ? '#67c23a' : 'rgb(192,196,204)'}">{{index+1}}</div>
                  </div>
                  <div style="display: flex;align-items: center;justify-content: flex-end" v-else-if="index == topPurposeList.length-1">
                    <div class="item-num" style="float:right" :style="{'background':item.isTrue ? '#67c23a' : 'rgb(192,196,204)'}">{{index+1}}</div>
                  </div>
                  <div style="display: flex;align-items: center;justify-content: center" v-else>
                    <div class="item-num" style="float:right" :style="{'background':item.isTrue ? '#67c23a' : 'rgb(192,196,204)'}">{{index+1}}</div>
                  </div>
                  <div class="item-name" >{{item.purposeTitle }}</div>
                  <div class="sjdiv" :style="{display:item.purposeId == cutPurposeId ? 'block' : 'none'}"></div>
              </div>
            </div>
            <div class="target-line"></div>
          </div>

        </div>
        <div class="msg-div" v-if="purposeList[cutIndex]">
          <div style="white-space: pre-wrap;">{{purposeList[cutIndex]['introduce']}}</div>
          <div class="copy-div">
            <span style="cursor: pointer;" @click="copy(purposeList[cutIndex]['introduce'])">复制</span>
          </div>
        </div>
        <div style="line-height: 40px;font-weight: bold;margin-top:20px">最近跟进记录</div>
        <el-table
          v-loading="listLoading"
          :data="tableData"
          border
          style="width: 100%;">
          <el-table-column
            label="跟进时间"
            align="center"
            min-width="150">
            <template slot-scope="scope">
              {{scope.row.createTime}}
            </template>
          </el-table-column>
          <el-table-column
            label="客户联系人"
            align="center"
            min-width="100">
            <template slot-scope="scope">
              {{scope.row.contactName}}
            </template>
          </el-table-column>
          <el-table-column
            label="跟进方式 "
            min-width="100"
            align="center">
            <template slot-scope="scope">
              {{scope.row.trackingTypeValue}}
            </template>
          </el-table-column>

          <el-table-column
            label="沟通方式"
            min-width="100"
            align="center">
            <template slot-scope="scope">
              {{scope.row.trackingMethodValue}}
            </template>
          </el-table-column>
          <el-table-column
            label="跟进目的"
            min-width="100"
            align="center">
            <template slot-scope="scope">
              {{scope.row.trackingPurposeValue}}
            </template>
          </el-table-column>
          <el-table-column
            label="跟进内容"
            min-width="200"
            header-align="center">
            <template slot-scope="scope">
              {{scope.row.trackingContent}}
            </template>
          </el-table-column>

          <el-table-column
            label="附件"
            min-width="150"
            align="center">
            <template slot-scope="scope">
              <el-image
                v-for="item in scope.row.trackingPics"
                :key="item"
                style="width: 50px; height: 50px"
                :src="item"
                :preview-src-list="scope.row.trackingPics">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column
            label="下次跟进时间"
            min-width="100"
            align="center">
            <template slot-scope="scope">
              {{scope.row.nextTrackingTime}}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>

  </div>

</template>
<script>
import {formatDate} from '@/utils/date';
import jt from '@/assets/images/jt.png'
import { getPurposeListAPI } from "@/api/fms.js";
import {customerStepDetail} from '@/api/company'
import {customerTrackingList} from '@/api/company'
import { mapGetters } from 'vuex'

const defaultLxrListQuery={
  cglId:[],
  "pageNum" : 1,
  "pageSize" : 10
};

export default {
  name: "index",
  data(){
    return {
      dialogVisible2:false,
      jt:jt,
      tableData:[],
      cutIndex:0,
      stepId:'',
      customerId:'',
      followType:'',
      listLoading:false,
      allTracking :'',
      allVisit :'',
      tackingNum :'',
      visitNum :'',
      topPurposeList :[],
      cutPurposeId:'',
      purposeList:[],
      type:''
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
  },
  components : {

  },
  created() {


  },
  filters: {

  },
  methods:{
    //获取跟进详情
    getStepDetail(){
      customerStepDetail({dataId:this.dataId,stepId:this.stepId}).then((res)=>{
        this.allTracking = res.allTracking;
        this.allVisit = res.allVisit;
        this.tackingNum = res.tackingNum;
        this.visitNum = res.visitNum;
        this.topPurposeList = res.purposeList;
        this.setcutIndex(res.purposeList[0] ?res.purposeList[0]['purposeId']:'');
        this.draw(res.x,res.y,res.y2)
      })
    },
    //跟进目的列表
    getPurposeList(){
      return getPurposeListAPI({pageNum:1,pageSize: 1000,isEnable:1,stepId:this.stepId,sort:'asc'}).then((res)=>{
         this.purposeList = res.list
      })
    },
    //找出Index
    setcutIndex(purposeId){
      this.cutPurposeId = purposeId
       this.cutIndex = this.purposeList.findIndex((el)=>{
         return el.purposeId == purposeId
       })
    },
    copy(t){
      if (!navigator.clipboard) {
        var ele = document.createElement("input");
        ele.value = t;
        document.body.appendChild(ele);
        ele.select();
        document.execCommand("copy");
        document.body.removeChild(ele);
        if (document.execCommand("copy")) {
          this.$message({
            message: '复制成功',
            type: 'success'
          });
        } else {
          this.$message({
            message: '复制失败',
            type: 'error'
          });
        }
      } else {
        navigator.clipboard.writeText(t).then(()=> {
          this.$message({
            message: '复制成功',
            type: 'success'
          });
        }).catch(()=> {
          this.$message({
            message: '复制失败',
            type: 'error'
          });
        })
      }
    },
    //画图
    draw(x,y,y2){
      document.getElementById('main2').removeAttribute('_echarts_instance_')
      var chartDom = document.getElementById('main2');
      var myChart = this.$echarts.init(chartDom);
      var option;
      let self = this;
      var txt1 = "预计" + self.allTracking + self.allVisit + '次拜访' + ' '+'已完成'+self.tackingNum + '次日常跟进，'+self.visitNum + '次拜访'
      let time = new Date(new Date().toLocaleDateString()).getTime()
      let length = x.length-1
      option = {
        title: {
          text: txt1,
          left: '4%',
          top: '0',
          textStyle:{
            fontSize:12
          }

        },
        legend: {
          right: '0',
          top: '0',
          data: ['拜访', '日常跟进']
        },
        grid: {
          left: '3%',
          top: '30%',
          right:'5%'
        },
        xAxis: {
          data:x,
          axisLine:{
            lineStyle: {
              color:'#999'
            },
          },
          axisLabel: {
            color:'#000',
            showMaxLabel:true,
            formatter: function (value, index) {
              console.log("index",index)
              console.log("length",length)
              var txt = "当前进度"
              if(value*1000 == time){
                return "{jt|}\n" + txt
              }else if(index == 0 || index == length) {
                return `{a|${formatDate(new Date(value * 1000), 'MM-dd')}}`
              }
            },
            rich: {
              a: {
                color: '#000',
              },
              jt: {
                height: 20,
                align: 'center',
                backgroundColor: {
                  image: self.jt
                }
              },
            },
          },
        },
        yAxis: {
          axisLine:{
            show:true,
            lineStyle: {
              color:'#999'
            },
          },
          axisTick:{
            show:false
          },
          axisLabel: {
            show:false
          },
          splitLine:{
            show:false
          },
        },
        series: [
          {
            name: '拜访',
            data: y2,
            type: 'scatter',
            emphasis: {
              focus: 'series',
            },
            symbol:'rect',
            itemStyle: {
              color: new this.$echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                {
                  offset: 0,
                  color: 'rgb(251, 118, 123)'
                },
                {
                  offset: 1,
                  color: 'rgb(204, 46, 72)'
                }
              ])
            }
          },
          {
            name: '日常跟进',
            data: y,
            type: 'scatter',
            emphasis: {
              focus: 'series',
            },
            itemStyle: {
              color: new this.$echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                {
                  offset: 0,
                  color: 'rgb(129, 227, 238)'
                },
                {
                  offset: 1,
                  color: 'rgb(25, 183, 207)'
                }
              ])
            }
          }
        ]
      };

      option && myChart.setOption(option);
    },

    //显示
    showPop(stepId,followType,dataId,type){
      this.dialogVisible2 = true;
      this.stepId = stepId;
      this.followType = followType;
      this.dataId = dataId;
      this.type = type
      this.getPurposeList().then(()=>{
        this.getStepDetail()
      })
      this.getList()
    },

    //关闭跟进弹窗
    handleClose2(){
      this.dialogVisible2 = false;

    },

    //获取列表
    getList() {
      this.listLoading = true;
      customerTrackingList({ pageNum : 1, pageSize : 10,dataId:this.dataId,type:this.followType}).then(response => {
        this.tableData = response.list;
        this.count = response.count;
        this.listLoading = false;
      }).catch(()=>{
        this.listLoading = false;
      });
    },



  },
}
</script>

<style  lang="scss">
.chceckspan{
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 20px;
  box-sizing: border-box;
  margin:5px;
  cursor: default;
  .el-tag__close{
    float: right;
    margin-top: -17px;
    margin-right: -15px;
  }
}
.chceckspan.chceckspan2 .el-tag__close{
  margin-top: 0;
}
.avatar-uploader{
  margin-bottom:10px;
  display: inline-block;
  width:80px;
  height:80px;
  border:1px solid #DCDFE6;
  text-align: center;
  line-height: 80px;
  vertical-align: middle;
}
.check-item{
  overflow: hidden;
  margin-bottom:5px;
  .el-checkbox{
    float:left;
    line-height: 20px;
  }
  .el-checkbox__label{
    display: none;
  }
  .label{
    float:left;
    width:calc(100% - 30px);
    margin-left:10px;
    line-height: 20px;
    font-size: 12px;
  }
}
.target-gjzy-div{
  width:100%;
  height:40px;
  position: relative;
  .target-line{
    position: absolute;
    width:100%;
    height:2px;
    background: #dcdfe6;
    top:4px;
    z-index: 0;
  }
  .target-list{
    width:100%;
    height:24px;
    display: flex;
    justify-content:space-between;
    align-items: center;
    z-index: 1;
    position: relative;
    .target-item{
      height:40px;
      .item-num{
        width:24px;
        height:24px;
        border-radius: 50%;
        background: rgb(192,196,204);
        text-align: center;
        line-height: 24px;
        color:#fff;
        font-size: 12px;
      }
      .item-name{
          text-align: center;
          font-size:14px;
          height:20px;
          padding-top:5px;
      }

    }
  }
}
</style>
